{% extends 'base.html' %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>用户展示</h2>
            <ol class="breadcrumb">
                <li>
                    <a hreaf="{% url 'index' %}">首页</a>
                </li>
                <li>
                    <a href="">用户管理</a>
                </li>
                <li>
                    <a href="">用户展示</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>用户展示 </h5>
            </div>
            <div class="ibox-content">
                {% if perms.users.add_user %}
                    <a class="btn btn-info" href="{% url 'user_add' %}">添加用户</a>
                {% endif %}
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th class="text-center">用户名</th>
                        <th class="text-center">邮箱</th>
                        <th class="text-center">微信</th>
                        <th class="text-center">中文名</th>
                        <th class="text-center">电话</th>
                        <th class="text-center">激活状态</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% if perms.users.show_user %}
                        {% for one in object_list %}
                            <tr>
                                <td class="text-center">{{ one.username }}</td>
                                <td class="text-center">{{ one.email }}</td>
                                <td class="text-center">{{ one.profile.wechat }}</td>
                                <td class="text-center">{{ one.profile.name_cn }}</td>
                                <td class="text-center">{{ one.profile.phone }}</td>
                                <td class="text-center">
                                    {% if one.is_active == 1 %}
                                        <i class="fa fa-circle text-navy"></i>
                                    {% else %}
                                        <i class="fa fa-circle text-danger"></i>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <a type="button" class="btn btn-primary btn-sm"
                                       href="{% url 'user_update' %}?id={{ one.id }}">更新</a>
                                {% if perms.users.delete_user %}
                                    <button type="button" class="btn btn-danger btn-sm"
                                            onclick="user_delete({{ one.id }},this)">
                                        删除
                                    </button>
                                {% endif %}
                                    {% if one.is_active == 0 %}
                                        <button type="button" class="btn btn-success btn-sm"
                                                onclick="user_status({{ one.id }},this)">
                                            启用
                                        </button>
                                    {% else %}
                                        <button type="button" class="btn btn-warning btn-sm"
                                                onclick="user_status({{ one.id }},this)">
                                            禁用
                                        </button>
                                    {% endif %}
                                    <a class="btn btn-info btn-sm"
                                       href="{% url 'user_set_perm' %}?id={{ one.id }}">权限</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    {% endif %}
                </table>
                {% if perms.users.show_user %}
                    <center>
                        <div class="btn-group">
                            {#                    判断是否具有上一页#}
                            {% if page_obj.has_previous %}
                                <a type="button" class="btn btn-white"
                                   href="{% url 'user_list' %}?page={{ page_obj.previous_page_number }}"><i
                                        class="fa fa-chevron-left"></i></a>
                            {% endif %}
                            {#                    遍历显示所有的页码#}
                            {#                        {% for page in paginator.page_range %}#}
                            {#                    调用新重写的页码范围#}
                            {% for page in page_range %}
                                {#                            判断是否是当前页面，如果是就高亮class active#}
                                {% if page == page_obj.number %}
                                    {#                                button 标签 修改 a 标签 通过herf属性进行跳转#}
                                    <a class="btn btn-white active"
                                       href="{% url 'user_list' %}?page={{ page }}">{{ page }}</a>
                                {% else %}
                                    <a class="btn btn-white" href="{% url 'user_list' %}?page={{ page }}">{{ page }}</a>
                                {% endif %}
                            {% endfor %}
                            {#                    判断是否存在下一页#}
                            {% if page_obj.has_next %}
                                <a type="button" class="btn btn-white"
                                   href="{% url 'user_list' %}?page={{ page_obj.next_page_number }}"><i
                                        class="fa fa-chevron-right"></i></a>
                            {% endif %}
                        </div>
                    </center>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}
{% block load_js %}
    <script>
        function user_delete(id, current_button) {
            username = $(current_button).parents().parents().children('td').eq(0).html()
            name_cn = $(current_button).parents().parents().children('td').eq(3).html()
            swal({
                    title: "用户" + username + '(' + name_cn + ')',
                    text: "真的确定删除吗?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        url: "{% url 'user_delete' %}",
                        type: 'get',
                        data: {'id': id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.status == 0) {
                                swal({
                                    title: res.msg,
                                    type: 'success',
                                    confirmButtonText: "知道了"
                                }, function () {
                                    //以上弹出框被点击确定后，会回调触发的函数
                                    //删除成功之后,重新刷新页面
                                    location.reload()
                                });
                            } else {
                                swal({
                                    title: res.msg,
                                    type: 'error',
                                    confirmButtonText: "知道了"
                                });
                            }
                        }
                    })
                })
        }

        function user_status(id, current_button) {
            username = $(current_button).parents().parents().children('td').eq(0).html()
            name_cn = $(current_button).parents().parents().children('td').eq(3).html()
            status = $(current_button).html().trim()
            {#console.log(status)#}
            swal({
                    title: "真的" + status + "吗?",
                    text: "用户" + username + '(' + name_cn + ')',
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        url: "{% url 'user_status' %}",
                        type: 'get',
                        data: {'id': id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.status == 0) {
                                swal({
                                    title: res.msg,
                                    type: 'success',
                                    confirmButtonText: "知道了"
                                }, function () {
                                    //以上弹出框被点击确定后，会回调触发的函数
                                    //删除成功之后,重新刷新页面
                                    location.reload()
                                });
                            } else {
                                swal({
                                    title: res.msg,
                                    type: 'error',
                                    confirmButtonText: "知道了"
                                });
                            }
                        }
                    })
                })
        }
    </script>
{% endblock %}